<template>
  <div>
    <Table
      :tableData="tableData"
      :title="title"
      @add="add"
       @edit="edit"
      @addTableData="addTableData"
      @handleDelete="handleDelete"
      @editTableData="editTableData"
      @checkDelete="checkDelete"
    
    >
      <el-table-column prop="roleName" label="职务名称" width="160" />
      
      <el-table-column prop="notes" label="备注" />
      <template #dialog>
        <el-form :model="form">
          <el-form-item label="职务名称">
              <el-input type="text" v-model="form.roleName"  />
          </el-form-item>
          <el-form-item label="备注">
              <el-input type="textarea" v-model="form.notes"  />
          </el-form-item>
          <el-form-item label="数据权限">
            <el-radio-group v-model="form.level">
                <el-radio :label="1">全部数据</el-radio>
                <el-radio :label="2">本部门及下属部门数据</el-radio>
                <el-radio :label="3">仅本人数据</el-radio>
              </el-radio-group>
          </el-form-item>
          <el-form-item label="菜单权限">
               <el-checkbox
                  v-model="checkAll"
                  :indeterminate="isIndeterminate"
                  @change="handleCheckAllChange"
                  >全选</el-checkbox
                >
                <el-checkbox-group
                  v-model="form.menuPower"
                  @change="handleCheckedCitiesChange"
                >
                  <el-checkbox v-for="item in menuPower" :key="item" :label="item.value">{{
                    item.label
                  }}</el-checkbox>
                </el-checkbox-group>
          </el-form-item>
           <el-form-item label="状态" >
          <el-switch
            v-model="form.operate"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
        </el-form>
      </template>
    </Table>
  
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, toRefs, computed } from "vue";
import { Plus, Edit, ArrowDownBold } from "@element-plus/icons-vue";

import Dialog from "@/components/Dialog.vue";
import {getRoleMsgData} from '@/api/dataList.js'

const menuPower = [
  {
    value:1,
    label:"首页"
  },
  {
    value:2,
    label:"用户信息页面"
  },
  {
    value:3,
    label:"权限管理页面"
  },
  {
    value:4,
    label:"修改/删除"
  },
  {
    value:5,
    label:"新增"
  }
]
const checkAll = ref(false)
const isIndeterminate = ref(true)
const options = [
  {
    value: "0",
    label: "当前部门",
  },
  {
    value: "1",
    label: "xxxx",
  },
];

const roleTypeOptions =ref([
  {
    value: "1",
    label: "管理层",
  },
   {
    value: "2",
    label: "员工",
  },
])
const tableData = ref([]);

const form = ref({
roleName:"",
level:"",
roleType:"",
notes:"",
operate:"",
postList:[],
msgPre:"",
menuPower:[]
})

const title = ref("");


// 点击全选按钮
const handleCheckAllChange = (val) => {
  const data = menuPower.map(i => i.value)
  form.value.menuPower = val?data:[]
 isIndeterminate.value = false
}

// 多选框状态发生变化时
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === menuPower.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < menuPower.length
}


onMounted(() => {
  getData()
})

// 获取表格数据
const getData = () => {
  getRoleMsgData().then((res) => {
    console.log("接口返回数据为：", res);
    localStorage.setItem("roleMsgData",JSON.stringify(res.data))
    tableData.value = res.data
  });
};




// 点击新增按钮
const add = () => {
  title.value = "新增";
  form.value = {}
  checkAll.value = false
}

// 点击修改按钮
const edit = (scope,index) => {
  title.value = "修改";
  form.value = {...form.value,...scope}
};

// 修改数据
const editTableData = (val) => {
  tableData.value[val] = {...form.value}
  // 调用修改接口
  checkAll.value = false
}

// 删除数据
const handleDelete = (scope,index) => {
tableData.value.splice(index,1)
// 调用删除接口
}

// 新增数据
const addTableData = () => {
tableData.value.push(form.value)
// 调用新增接口
}

// 批量删除
const checkDelete = (data) => {
  data.forEach(item => {
      tableData.value = tableData.value.filter(i => i !==item)
    })
  // 调用批量删除接口
}

</script>

<style lang="scss" scoped>
</style>
